/**
 * @author truexin
 * @date   16/04/24
 */

(function (lf, r) {
    
    var RC = r.createClass,
        item_list = [
            {
                bgClass: 'lightblue-bg',
                iconCon: 'controll',
                conText: '控制',
                menu_list: [
                    
                    {
                        text: '客厅吸顶灯',
                    },
                    {
                        text: '客厅吸顶灯',
                    },
                    {
                        text: '客厅吸顶灯',
                    },
                    {
                        text: '客厅吸顶灯',
                    },
                    {
                        text: '客厅吸顶灯',
                    },
                    {
                        text: '客厅吸顶灯',
                    },
                    {
                        text: '客厅吸顶灯',
                    },
                    {
                        text: '客厅吸顶灯',
                    },
                ]
            },
            {
                bgClass: 'green-bg',
                iconCon: 'place',
                conText: '场景',
                menu_list: [
                    {
                        text: '客厅吸顶灯',
                    },
                    {
                        text: '客厅吸顶灯',
                    },
                    {
                        text: '客厅吸顶灯',
                    },
                    {
                        text: '客厅吸顶灯',
                    },
                    {
                        text: '客厅吸顶灯',
                    },
                    {
                        text: '客厅吸顶灯',
                    },
                    {
                        text: '客厅吸顶灯',
                    },
                    {
                        text: '客厅吸顶灯',
                    },
                    {
                        text: '客厅吸顶灯',
                    },
                    {
                        text: '客厅吸顶灯',
                    },
                ]
            },
            {
                bgClass: 'yellow-bg',
                iconCon: 'app',
                conText: '应用',
                menu_list: [
                    {
                        text: '客厅吸顶灯',
                    },
                    {
                        text: '客厅吸顶灯',
                    },
                    {
                        text: '客厅吸顶灯',
                    },
                    {
                        text: '客厅吸顶灯',
                    },
                    {
                        text: '客厅吸顶灯',
                    },
                    {
                        text: '客厅吸顶灯',
                    },
                    {
                        text: '客厅吸顶灯',
                    },
                    {
                        text: '客厅吸顶灯',
                    },
                    {
                        text: '客厅吸顶灯',
                    },
                    {
                        text: '客厅吸顶灯',
                    },
                ]
            },
            {
                bgClass: 'purple-bg',
                iconCon: 'fun',
                conText: '功能',
                menu_list: [
                    {
                        text: '客厅吸顶灯',
                    },
                    {
                        text: '客厅吸顶灯',
                    },
                    {
                        text: '客厅吸顶灯',
                    },
                    {
                        text: '客厅吸顶灯',
                    },
                    {
                        text: '客厅吸顶灯',
                    },
                    {
                        text: '客厅吸顶灯',
                    },
                
                ]
            },
            {
                bgClass: 'blue-bg',
                iconCon: 'info',
                conText: '信息',
                menu_list: [
                    
                    {
                        text: '客厅吸顶灯',
                    },
                    {
                        text: '客厅吸顶灯',
                    },
                    {
                        text: '客厅吸顶灯',
                    },
                    {
                        text: '客厅吸顶灯',
                    },
                    {
                        text: '客厅吸顶灯',
                    },
                    {
                        text: '客厅吸顶灯',
                    },
                    {
                        text: '客厅吸顶灯',
                    },
                ]
            },
            {
                bgClass: 'red-bg',
                iconCon: 'prod',
                conText: '商品',
                menu_list: [
                    
                    {
                        text: '客厅吸顶灯',
                    },
                    {
                        text: '客厅吸顶灯',
                    },
                    {
                        text: '客厅吸顶灯',
                    },
                    {
                        text: '客厅吸顶灯',
                    },
                    {
                        text: '客厅吸顶灯',
                    },
                    {
                        text: '客厅吸顶灯',
                    },
                    {
                        text: '客厅吸顶灯',
                    },
                ]
            }
        ];
    let CollapseMenu = RC({
        getInitialState() {
            return ({
                list: [],
            })
        },
        componentWillMount(){
        },
        componentDidMount(){

        },
        render(){
            let collapseList = item_list.map((data) => {
                return <li className="mui-table-view-cell mui-collapse panel">
                    <a className="mui-navigate-right" href="javascript:void(0);">
                        <div className="glyph">
                            <span className={'iconfont ' + data.iconCon}></span>
                            <span className="text">{data.conText}</span>
                        </div>
                    </a>
                    <MenuList menu_list={data.menu_list}/>
                </li>
            });
            return <ul className="mui-table-view mui-table-view-chevron">
                {collapseList}
            </ul>
        }
    });
    
    let MenuList = RC({
        getInitialState() {
            return ({
                list: [],
            })
        },
        componentWillMount(){
        },
        componentDidMount(){
        },
        render(){
            let menu_list = this.props.menu_list;
            let menuList = menu_list.map((data) => {
                return <li className="mui-table-view-cell big-switch">
                    <a className="mui-navigate-right" href="javascript:void(0);">
                        <span className="table-txt">{data.text}</span>
                        <span className="mui-switch mui-active">
                            <span className="mui-switch-handle"></span>
                        </span>
                    </a>
                </li>
            })
            return (
                <ul className="mui-table-view mui-table-view-chevron">
                    {menuList}
                </ul>
            )
        }
    });
    
    
    var IndexBody = RC({
        componentDidMount: function () {
            var $switches = $(".big-switch");
            for (var i = 0; i < $switches.length; i++) {
                $switches[i].onclick = function (e) {
                    e = window.event || e;
                    var target = e.srcElement || e.target;
                    if (target.nodeName == "A" || target.nodeName == "LI") {
                        var activeSwitch = target.getElementsByClassName("mui-switch")[0];
                        if (activeSwitch.className == "mui-switch mui-active") {
                            activeSwitch.className = "mui-switch";
                        } else {
                            activeSwitch.className = "mui-switch mui-active";
                        }
                    } else if (target.nodeName == "SPAN") {
                        target = target.parentNode.parentNode;
                        var activeSwitch = target.getElementsByClassName("mui-switch")[0];
                        if (activeSwitch.className == "mui-switch mui-active") {
                            activeSwitch.className = "mui-switch";
                        } else {
                            activeSwitch.className = "mui-switch mui-active";
                        }
                    }
                }
            }

            let $activePanel = $('.panel');
            $activePanel.first().addClass('mui-active');// 默认第一个选中
        },
        render(){
            return (
                <div className="finger-add">
                    <CollapseMenu/>
                </div>
            )
        },
    });
    
    r.render(
        <IndexBody />,
        document.getElementById('root'), function () {
            $('#root').css({backgroundColor: '#eaeaea'});
        }
    )
    
})(liefeng, React)